<template>
	<view>
		
		<page-container :show="isShow" :overlay="false" custom-style="height:calc(100vh);overflow:scroll;background-color: #F4F4F4;"
			@beforeleave="onBeforeLeave">
			<view class="examPage">
				<u-navbar :title="'支付订单'" :custom-back="customBacks" :immersive="false" :is-back="true" :background="background"
					:border-bottom="false"></u-navbar>
				<view style="height: 100rpx;"></view>
				<view class="pay_wrap">
					<view class="pay_time">支付剩余时间<u-count-down :timestamp="1800"></u-count-down></view>
					<view class="pay_price"><text>¥</text>{{price}}</view>
					<view class="sub_name">{{shopName}}</view>
				</view>

				<view class="Pay_type">
					<view class="type_item u-flex">
						<view class="pay_name u-flex">
							<image :src="BestImgUrl+'/PackageDetails/Frame-3.png'"></image>
							<text>微信支付</text>
						</view>
						<view class="choose_icon">
              <u-checkbox v-model="check_on" shape="circle" size="32" active-color="#FF7900" @change="check_icon"></u-checkbox>
							<!--<image src="/static/images/choose_2.png"></image>-->
						</view>
					</view>
				</view>

				<view class="bottom-btn-wrap">
					<view class="bottom-fixed-btn" @click="TopPaySuccess()">
						<view class="btn pay">确认支付</view>
					</view>
				</view>
			</view>
		</page-container>




	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				isShow: true, // 最开始设置为显示
				background: {
					backgroundColor: '#ffffff',
				},
				BestImgUrl: app.globalData.imgurl,
				order_id: "",
				shopName: "",
				price: "",
        check_on: true,
			}
		},
		onLoad(ops) {
			console.log('订购信息', ops)
			this.order_id = ops.order_id
			this.shopName = ops.name
			this.price = ops.price
		},
		methods: {
			onBeforeLeave() {
				let that = this
				that.isShow = false
				uni.showModal({
					title: '确定放弃付款?',
					content: '您的订单还未完成支付，请在订单取消前尽快完成支付。',
					confirmColor: '#FF4910',
					success: function(res) {
						if (res.confirm) {
							//console.log('用户点击确定');
							// uni.reLaunch({
							// 	url: '/subpackageA/pages/orders/orders?types=' + 1
							// })
							let data = {
								id: that.order_id
							}
							uni.reLaunch({
								url: '/subpackageC/pages/MH-OrderDetails/MH-OrderDetails?data=' + encodeURIComponent(JSON.stringify(data))
							})
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			},
			customBacks() {
				//this.isShow = false
				let that = this
				uni.showModal({
					title: '确定放弃付款?',
					content: '您的订单还未完成支付，请在订单取消前尽快完成支付。',
					confirmColor: '#FF4910',
					success: function(res) {
						if (res.confirm) {
							//console.log('用户点击确定');
							// uni.reLaunch({
							// 	url: '/subpackageA/pages/orders/orders?types=' + 1
							// })
							let data = {
								id: that.order_id
							}
							uni.reLaunch({
								url: '/subpackageC/pages/MH-OrderDetails/MH-OrderDetails?data=' + encodeURIComponent(JSON.stringify(data))
							})
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			},
			TopPaySuccess() {
				let that = this
				uni.showLoading({
					title: '支付中'
				})
				setTimeout(() => {
					// that.$api.PayPackageOrder({
					// 	order_id: that.order_id,
					// 	pay_type: 'applet_wechat' //支付方式：applet_wechat小程序支付,wechat 公众号支付，app_wechat微信APP支付，alipay支付宝支付，app_alipay支付宝APP支付
					// }).then(res => {
					// 	console.log('支付参数', res.data.result);

						uni.hideLoading()
						// uni.requestPayment({
						// 	provider: "wxpay",
						// 	timeStamp: res.data.result.timeStamp,
						// 	nonceStr: res.data.result.nonceStr,
						// 	package: res.data.result.package,
						// 	signType: res.data.result.signType,
						// 	paySign: res.data.result.paySign,
						// 	success: function(reswxminapp) {
								uni.navigateTo({
									url: '/subpackageC/pages/MH-PaySuccess/MH-PaySuccess?order_id=' + that.order_id + '&name=' + that.shopName + '&price=' + that.price
								});
							//},
							// fail: function(errwxmini) {
							// 	uni.hideLoading()
							// 	uni.showToast({
							// 		title: '支付失败',
							// 		icon: 'none'
							// 	});
							// }
						//});
					// }).catch(err => {
					// 	uni.showToast({
					// 		title: err.data.msg,
					// 		icon: 'none',
					// 		duration: 3000
					// 	});
					// 	uni.hideLoading()
					// });
				}, 2000)
			},
      check_icon(e) {
        console.log(e)
        this.check_on = !this.check_on
      }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
		position: relative !important;
		top: 0px !important;
	}

	.pay_wrap {
		text-align: center;

		.pay_time {
			font-size: 24rpx;
			color: $zzy-text-color-666666;
		}

		.pay_price {
			font-size: 75rpx;
			font-weight: bold;
			margin: 10rpx 0 0 0;

			text {
				font-size: 36rpx;
			}
		}

		.sub_name {
			font-size: 24rpx;
			color: $zzy-text-color-666666;
		}
	}

	.Pay_type {
		padding: 30rpx;

		.type_item {
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 36rpx 42rpx;

			.pay_name {
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 22rpx;
				}

				view {
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.choose_icon {
				margin-left: auto;

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
	}
</style>